import React, { Component } from 'react'
import { Button, Input, InputNumber, Radio, Space } from 'antd'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
import TheDialog from '@/components/TheDialog'
import AddTemplate from './component/AddTemplate'
import EditTemplate from './component/EditTemplate'
import { apiFreightList, apiFreightAdd, apiFreightDetail, apiFreightEdit, apiFreightDel } from '@/request/settings'
import './style/style.less'
import _ from 'lodash'

export default class Distribution extends Component {
  state = {
    columns: [
      {
        title: '模板名称',
        dataIndex: 'freightTemplateName',
        key: 'freightTemplateName'
      },
      {
        title: '计算方式',
        dataIndex: 'pricingMethod',
        key: 'pricingMethod',
        render: (text, record) => {
          let label = ''
          switch (text) {
            case 'WEIGHT':
              label = '重量';
              break;
            case 'NUM':
              label = '计件';
              break;
            case 'FREE':
              label = '包邮';
              break;
          }
          return label;
        }
      },
      {
        title: '操作',
        render: (text, record) => {
          return <>
            <TheButton hasPermi={['settings:distribution:edit']} onClick={() => this.openEditDialog(record)}>编辑</TheButton>
            <TheButton hasPermi={['settings:distribution:delete']} onClick={() => this.delConfirm(record)}>删除</TheButton>
          </>
        }
      }
    ],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    dataSource: [],
    visible: false,
    editVisible: false,
    editValue: {}
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    let res = await apiFreightList({ ...this.state.pageData })
    if (res.data && res.code === 0) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => this.getData())
  }
  openAddDialog = () => {
    this.setState({
      visible: true
    })
  }
  openEditDialog = async (value) => {
    const { freightTemplateId } = value
    let res = await apiFreightDetail({ freightTemplateId })
    if (res.code === 0 && res.data) {
      this.setState({
        editVisible: true,
        editValue: res.data
      })
    }
  }
  closeEditDialog = () => {
    this.setState({
      editValue: {},
      editVisible: false
    })
  }
  closeDialog = () => {
    this.setState({
      visible: false
    })
  }
  addTemplate = async () => {
    this.setState({ addConfirmLoading: true })
    let value = this.addTemplateRef.getValue()
    if (!_.isEmpty(value)) {
      let res = await apiFreightAdd({ ...value })
      if (res.code === 0) {
        this.closeDialog()
        React.$message({
          type: 'info',
          content: '新增成功'
        })
        this.getData()
      }
    }
    this.setState({ addConfirmLoading: false })
  }
  editTemplate = async () => {
    const { freightTemplateId, storeId } = this.state.editValue
    this.setState({ editConfirmLoading: true })
    let value = this.editTemplateRef.getValue()
    if (!_.isEmpty(value)) {
      value.freightTemplateChildList = value.freightTemplateChildList ? value.freightTemplateChildList : []
      let res = await apiFreightEdit({ ...value, freightTemplateId, storeId })
      if (res.code === 0) {
        this.closeEditDialog()
        React.$message({
          type: 'info',
          content: '编辑成功'
        })
        this.getData()
      }
    }
    this.setState({ editConfirmLoading: false })
  }
  delConfirm = value => {
    React.$confirm({
      title: '您确认删除此模板吗？',
      onOk: async () => {
        const { freightTemplateId } = value
        let res = await apiFreightDel({ freightTemplateId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      }
    })
  }

  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total, visible, editVisible, editValue, addConfirmLoading, editConfirmLoading } = this.state
    return (
      <div className='p-layout-box'>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <TheButton type="default" size="middle" hasPermi={['settings:distribution:add']} onClick={this.openAddDialog}>新增</TheButton>
        </div>
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
        <TheDialog
          title="新增模板"
          visible={visible}
          handleOk={this.addTemplate}
          handleCancel={this.closeDialog}
          confirmLoading={addConfirmLoading}
        >
          <AddTemplate ref={ref => this.addTemplateRef = ref} />
        </TheDialog>
        <TheDialog
          title="编辑模板"
          visible={editVisible}
          handleOk={this.editTemplate}
          handleCancel={this.closeEditDialog}
          confirmLoading={editConfirmLoading}
        >
          <EditTemplate editValue={editValue} ref={ref => this.editTemplateRef = ref} />
        </TheDialog>
      </div>
    )
  }
}
